<template>
  <div class="course-table">
    <van-dialog
      ref="qviewBox"
      v-model="showQue"
     
      show-cancel-button
      @cancel="qCanceldialog"
      confirm-button-text="提交"
      confirm-button-color="#1989fa"
      :before-close="qonBeforeClose"
    >
      <div :class="{ fixedTitle_scroll: isfix }" style="">
        {{ q_eva_title }}
      </div>
      <div class="eva_content" @mousewheel="scrollChange">
        <div class="eva_div" v-for="(item, index) in q_data" :key="index">
          <span v-if="item.question_null == 1"
            ><b>*{{ index + 1 }}、{{ item.question_describe }}</b></span
          >
          <span v-else="item.question_null == 0"
            ><b>{{ index + 1 }}、{{ item.question_describe }}</b></span
          >
          <van-radio-group
            v-if="item.question_type == 2"
            v-model="evaInfo[item.ques]"
          >
            <van-radio
              name="1"
              @click="check_btn(index)"
              checked-color="#07c160"
              >{{ item.option_1 }}</van-radio
            >
            <van-radio
              name="2"
              @click="check_btn(index)"
              checked-color="#07c160"
              >{{ item.option_2 }}</van-radio
            >
            <van-radio
              name="3"
              @click="check_btn(index)"
              checked-color="#07c160"
              >{{ item.option_3 }}</van-radio
            >
            <van-radio name="4" checked-color="#07c160">{{
              item.option_4
            }}</van-radio>
            <van-radio name="5" checked-color="#07c160">{{
              item.option_5
            }}</van-radio>
            <van-field
              v-model.trim="desc_reason[index + 1]"
              v-if="evaInfo[item.ques] == '4' || evaInfo[item.ques] == '5'"
              rows="3"
              autosize
              border
              type="textarea"
              maxlength="500"
              placeholder="请输入您的意见"
              show-word-limit
              required
            />
          </van-radio-group>

          <van-field
            v-else="item.question_type == 1"
            v-model.trim="evaInfo[item.ques]"
            rows="3"
            autosize
            border
            type="textarea"
            placeholder="请输入您的意见..."
          />
        </div>
      </div>
    </van-dialog>

    <!-- <van-nav-bar
          title="本周课程"
        /> -->
    <van-nav-bar :title="whichWeek_title" >
      <template #right >
        <van-icon name="arrow-down"  size="18" @click="showWeeks = true" />
      </template>
    </van-nav-bar>

    <!-- .top position: relative; -->
      <!-- 顶部周 -->
      <div class="top" :style="{ width: courseWidth * weekTable.length + 'px' }">
          <div v-for="item in weekTable"
            :class="nowWeek == item ? 'top-text' : 'no-top-text'"
            :style="{ width: courseWidth + 'px' }"
          >
          {{ item }}
        </div>
      </div>
        

    <el-scrollbar style="width: 100%; height: 100%">
      
      <div class="course-table-content">
        
        <!-- 原顶部周位置 -->

        <div
          class="main"
          :style="{
            width: courseWidth * weekTable.length + 35 + 'px',
            height: courseHeight * timeTable.length + 'px',
          }"
        >
          <div class="period">
            <!-- 左边课程序号 -->
            <div
              v-for="item in timeTable"
              class="left-text"
              :style="{ height: courseHeight + 'px' }"
            >
              {{ item }}
            </div>
          </div>
          <!--课表-->
          <div v-for="(item, index) in Courses">
            <div
              class="flex-item kcb-item"
              @click="
                selectedCourseIndex = index;
                showDetail = true;
                showCourse(item, index);
              "
              :style="{
                marginLeft: (item.courseColum - 1) * courseWidth + 'px',
                marginTop: (item.c_time_row1 - 1) * courseHeight + 5 + 'px',
                width: courseWidth - 5 + 'px',
                height: item.c_time_length * courseHeight - 5 + 'px',
                backgroundColor:
                  item.stu_cm_state == 1 ? '#C8C9CC' : colorArrays[index % 9],
              }"
            >
              <div
                :class="item.stu_cm_state == 1 ? 'small_txt_al' : 'small-text'"
              >
                {{ item.course_name + "@" + item.now_place }}
              </div>
              <!-- <div v-show="item.couse_flag == 1"><img class="alredy_eva" src="../../images/alread_eva.png"  alt=""></div> -->
              <!-- 根据条件显示课程评价的图标，1、显示哪些课程需要评价，显示信息图标，2、评价完成以后，显示成功图标 -->
              <!-- <van-icon class="alredy_eva" name="success" v-if="item.stu_cm_state == 1" /> -->
            </div>
          </div>
          <!--事件课显示按钮-->
          <!-- <el-button type="primary" @click="showPracticeCourseDialog = true" class="btn_practice_course">实践课</el-button> -->
        </div>
      </div>
    </el-scrollbar>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="todo-list-o" @click="myCourse"
        >课表</van-tabbar-item
      >
      <van-tabbar-item icon="contact" @click="myHome">我的</van-tabbar-item>
    </van-tabbar>
    <van-action-sheet v-model="showDetail" title="课程详情" color="red">
      <van-button
        v-if="course_flag == 1 && (stu_cm_state == 0 || stu_cm_state == null)"
        round
        type="info"
        v-show="isEvaluate"
        @click="courseEva(course_id)"
        :disabled="isReacheTime"
        >{{ title_txt }}</van-button
      >
      <van-button
        v-else-if="course_flag == 1 && stu_cm_state == 1"
        round
        type="primary"
        disabled
        v-show="isEvaluate"
        >已评价</van-button
      >
      <van-button
        v-else
        round
        type="primary"
        disabled
        v-show="false"
      ></van-button>
      <van-cell
        title="名称:"
        icon="label-o"
        color="#1989fa"
        :value="datail_name"
      />
      <van-cell
        title="地点:"
        icon="location-o"
        color="#1989fa"
        :value="datail_address"
      />
      <van-cell
        title="老师:"
        icon="manager-o"
        color="#1989fa"
        :value="datail_teacher"
      />
      <van-cell
        title="时间:"
        icon="clock-o"
        color="#1989fa"
        :value="datail_time"
      />
    </van-action-sheet>
    <!-- 切换周数 -->
    <van-action-sheet v-model="showWeeks">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        :default-index="whichWeek - 1"
      />
    </van-action-sheet>

    <van-dialog
      ref="viewBox"
      v-model="showEvaDialog"
      :title="c_eva_title"
      show-cancel-button
      @cancel="Canceldialog"
      confirm-button-text="提交"
      confirm-button-color="#1989fa"
      :before-close="onBeforeClose"
    >
      <div :class="{ fixedTitle_scroll: isfix }" style="color: red">
        {{ c_eva_title }}
      </div>
      <div class="eva_content" @mousewheel="scrollChange">
        <div class="eva_div" v-for="(item, index) in eva_data" :key="index">
          <span v-if="item.question_null == 1"
            ><b>*{{ index + 1 }}、{{ item.question_describe }}</b></span
          >
          <span v-else="item.question_null == 0"
            ><b>{{ index + 1 }}、{{ item.question_describe }}</b></span
          >
          <van-radio-group
            v-if="item.question_type == 2"
            v-model="evaInfo[item.ques]"
          >
            <van-radio
              name="1"
              @click="check_btn(index)"
              checked-color="#07c160"
              >{{ item.option_1 }}</van-radio
            >
            <van-radio
              name="2"
              @click="check_btn(index)"
              checked-color="#07c160"
              >{{ item.option_2 }}</van-radio
            >
            <van-radio
              name="3"
              @click="check_btn(index)"
              checked-color="#07c160"
              >{{ item.option_3 }}</van-radio
            >
            <van-radio name="4" checked-color="#07c160">{{
              item.option_4
            }}</van-radio>
            <van-radio name="5" checked-color="#07c160">{{
              item.option_5
            }}</van-radio>
            <van-field
              v-model.trim="desc_reason[index + 1]"
              v-if="evaInfo[item.ques] == '4' || evaInfo[item.ques] == '5'"
              rows="3"
              autosize
              border
              type="textarea"
              maxlength="500"
              placeholder="请输入您的意见"
              show-word-limit
              required
            />
          </van-radio-group>

          <van-field
            v-else="item.question_type == 1"
            v-model.trim="evaInfo[item.ques]"
            rows="3"
            autosize
            border
            type="textarea"
            placeholder="请输入您的意见..."
          />
        </div>
      </div>
    </van-dialog>

    <!-- <el-dialog
            title="课程评价"
            :visible.sync="showUsualCourseDialog"
            width="30%"
            center>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showUsualCourseDialog = false">确 定</el-button>
            </span>
        </el-dialog> -->
  </div>
</template>
 
<script>
import { Notify, Toast } from "vant";
export default {
  name: "CourseTable",
  data() {
    return {
      showQue: false,
      showUsualCourseDialog: false,
      showPracticeCourseDialog: false,
      selectedCourseIndex: 0,
      Courses: [
        {
          c_id: "",
          c_m_id2: "",
          c_time: "",
          c_time_length: "",
          c_time_row1: "",
          cg_id: "",
          cid: "",
          class_day: "",
          courseColum: "",
          course_class_grouplist: "",
          course_id: "",
          course_name: "",
          course_no: "",
          now_place: "",
          old_place: "",
          course_flag: "",
          stu_cm_state: "",
          sch_detail_id: "",
          tea_id1: "",
          tea_id2: "",
          tea_id3: "",
          tea_id4: "",
          tea_id5: "",
          tea_name1: "",
          tea_name2: "",
          tea_name3: "",
          tea_name4: "",
          tea_name5: "",
          week: "",
        },
      ],
      weekTable: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      timer: null,
      nowWeek: "",
      nowDate: "",
      nowTime: "",
      active: 0,
      showDetail: false,
      datail_name: "",
      datail_address: "",
      datail_teacher: "",
      datail_time: "",
      course_flag: "", 
      stu_cm_state: "",
      course_id: "",
      isEvaluate: true,
      showWeeks: false,
      columns: [],
      // columns: ['第一周', '第二周', '第三周', '第四周', '第五周', '第六周', '第七周', '第八周'],
      whichWeek_title: "",
      whichWeek: 1,
      whichWeek_temp: 0,
      showEvaDialog: false,
      course_id: "",
      stu_cm_id: "",
      c_eva_title: "", // 课程评价标题
      q_eva_title: "", // 调查标题
      eva_data: [], //课程问卷
      q_data: [], //调查问卷
      evaInfo: {},
      qInfo: {},
      desc_reason: {}, //选择不符合是输入的理由
      isShowDesc: false, //当选择不符合或完全不符合后，出现输入框
      ques_length: 0,
      q_length: 0,
      radios_num: 0,
      isActive: true,
      isReacheTime: false, // 该课程是否已经达到开课时间
      title_txt: "课程评价",
      telRules: [
        {
          required: true,
          message: "手机号码不能为空",
          trigger: "onBlur",
        },
      ],
      // evaInfo: [],
    };
  },
  props: {
    width: {
      type: Number,
      // default:840
    },
    height: {
      type: Number,
      default: 635,
    },
    timeTable: {
      type: Array,
      default: () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    },
    colorArrays: {
      type: Array,
      default: () => [
        "#ef5b9c",
        "#f15b6c",
        "#f26522",
        "#ffd400",
        "#C087F2",
        "#7fb80e",
        "#65c294",
        "#78cdd1",
        "#DC5541",
      ],
    },
    colorArrays_al: {
      type: Array,
      default: () => ["#C8C9CC"],
    },
  },
  computed: {
    courseWidth() {
      return Math.max(
        (document.documentElement.clientWidth - 35) / this.weekTable.length,
        0
      );
    },
    courseHeight() {
      return Math.max((this.height - 35) / this.timeTable.length, 50);
    },
    selectedCourse() {
      return this.usualCourses[this.selectedCourseIndex];
    },
  },
  created() {},
  mounted() {
    // this.timer = setInterval(() => {
    //     this.setNowTimes()
    // }, 1000)
    // 执行时间函数
    this.setNowTimes();
    this.getCourse();
    this.getWeeks();
    this.queEva();
  },
  methods: {
    scrollChange () {
                let scrollTop = this.$refs.viewBox.$el.scrollTop;
                let offsetTop = 0;
                scrollTop > offsetTop ? this.isfix = true : this.isfix = false
                console.log(scrollTop);
                console.log(offsetTop);
            },

    myHome() {
      this.$router.push("/profile");
    },
    myCourse() {
      this.$router.push("/schedule");
    },
    //获取本地时间，并按格式显示在页面上
    setNowTimes() {
      let myDate = new Date();
      // console.log(myDate)
      let wk = myDate.getDay();
      let yy = String(myDate.getFullYear());
      // let mm = myDate.getMonth() + 1
      let mm = String(
        myDate.getMonth() < 10
          ? "0" + (myDate.getMonth() + 1)
          : myDate.getMonth() + 1
      );
      let dd = String(
        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
      );
      let hou = String(
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
      );
      let min = String(
        myDate.getMinutes() < 10
          ? "0" + myDate.getMinutes()
          : myDate.getMinutes()
      );
      let sec = String(
        myDate.getSeconds() < 10
          ? "0" + myDate.getSeconds()
          : myDate.getSeconds()
      );
      let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      let week = weeks[wk];
      this.nowDate = yy + "/" + mm + "/" + dd;
      this.nowTime = hou + ":" + min + ":" + sec;
      this.nowWeek = week;
    },
    // 格式化时间戳
    formatDate(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      // let data_time = y + '-' + MM + '-' + d+ ' ' + h+':'+m+':'+s;
      let data_time = y + "-" + MM + "-" + d;
      return data_time;
    },
    // 登录成功之后，获取课程信息
    getCourse() {
      const param = window.localStorage.getItem("account");
      const now_day_time = this.nowDate;
      this.req
        .post("/schedule/student", { account: param, current: now_day_time })
        .then((response) => {
          // let now_time = this.formatDate(response.data[0].class_day);
          // console.log(now_time);
          console.log(response.data);
          this.Courses = response.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 登录成功之后,获取周数
    getWeeks() {
      const acc = window.localStorage.getItem("account");
      this.req
        .post("/schedule/week", { account: acc })
        .then((response) => {
          // console.log(response);
          this.whichWeek_temp = response.data.current_week;
          this.whichWeek = this.whichWeek_temp;
          this.whichWeek_title = "第" + this.whichWeek_temp + "周(本周)";
          // 格式话所有周数
          for (let i = 0; i < response.data.week_list.length; i++) {
            // 循环遍历，用户在选择时，显示当前周数
            if (this.whichWeek_temp == response.data.week_list[i]) {
              this.columns[i] = "第" + response.data.week_list[i] + "周(本周)";
            } else {
              this.columns[i] = "第" + response.data.week_list[i] + "周";
            }
          }
          // this.columns = response.data.week_list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 课程详情
    showCourse(item, index) {
      let now_time = this.formatDate(item.class_day);
      this.datail_name = item.course_name;
      this.datail_address = item.now_place;
      this.datail_teacher = item.tea_name1;
      this.datail_time = now_time + " (" + item.c_time + ")";
      this.course_flag = item.course_flag;
      this.stu_cm_state = item.stu_cm_state;
      this.course_id = item.course_id;
      var current_time = new Date().toLocaleDateString(); //获取当前日期
      var data1 = new Date(current_time);
      if (data1 < item.class_day) {
        //如果当前时间小于等于课程时间，不能进行评课
        this.isReacheTime = true;
        this.title_txt = "请完成学习之后再来评价";
      } else {
        this.isReacheTime = false;
        this.title_txt = "课程评价";
      }
    },
    // 用户切换周数，触发该函数，按周数请求课程
    onConfirm(value, index) {
      // Toast(`当前值：${value}, 当前索引：${index}`);
      const acc_week = window.localStorage.getItem("account");
      // 通过索引值来发送周数，索引默认从0开始，所以要加一，表示从第一周开始
      var p_week = index + 1;
      // var cur_week = value;
      this.req
        .post("/schedule/stu_schedule", { account: acc_week, week: p_week })
        .then((response) => {
          // console.log(response.data);
          this.whichWeek_title = "第" + p_week + "周";
          if (p_week == this.whichWeek_temp) {
            this.whichWeek_title = "第" + p_week + "周(本周)";
          } else {
            this.whichWeek_title = "第" + p_week + "周";
          }
          this.Courses = response.data;
          this.showWeeks = false;

          // console.log(response.data);
          // this.Courses = response.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onCancel() {
      this.showWeeks = false;
    },
    Canceldialog() {
      // 将滚动条重置为0
      this.$refs.viewBox.$el.scrollTop = 0;
      this.showEvaDialog = false;
      var temp_length = this.ques_length;
      for (var i = 0; i < temp_length; i++) {
        var temp_ques = "ques" + i;
        this.evaInfo[temp_ques] = "";
      }
    },
    // 课程评价按钮
    courseEva(c_id) {
      this.showEvaDialog = true;
      const eva_id = c_id;
      this.course_id = c_id;
      const acc_eva = window.localStorage.getItem("account");
      this.req
        .post("/student_comment", { account: acc_eva, courseId: eva_id })
        .then((response) => {
          let { code, data, msg } = response;
          console.log(data);
          this.stu_cm_id = data.comment_detail.stu_cm_id;
          // 选择题的个数
          this.radio_num = data.comment_overall.model_cm_op_count;
          if (code == 200) {
            this.c_eva_title = data.comment_overall.model_cm_name;
            this.eva_data = data.comment_detail.commentList;
            this.ques_length = data.comment_detail.commentList.length;
            for (var i = 0; i < this.ques_length; i++) {
              this.eva_data[i].ques =
                "ques" + data.comment_detail.commentList[i].question_id;
              var item =
                "ques" + data.comment_detail.commentList[i].question_id;
              // this.evaInfo[item] = '';
              // 可以借助Vue提供了相关API动态添加响应式属性
              this.$set(this.evaInfo, item, "");
              // this.evaInfo.push(item);
            }
          } else {
            Notify({ type: "danger", message: "评价内容获取失败,请重试..." });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 改选单选框的值时,如果不等于4和5就将输入框中的内容重置为null
    check_btn(index) {
      this.desc_reason[index + 1] = "";
    },
    // 评价完成之后关闭弹窗
    async onBeforeClose(action, done) {
      if (action === "confirm") {
        var submit_info = this.evaInfo;
        var submit_desc_reason = this.desc_reason;
        var temp_length = this.radio_num;
        var temp_str = [];
        var temp_desc_reason = []; //将非空的理由放入数组中
        for (var i = 1; i <= temp_length; i++) {
          var temp_ques = "ques" + i;
          // 判断问题不能为空
          if (submit_info[temp_ques] == "") {
            var str_info = "问题" + i + "没有选择";
            Toast.fail(str_info);
            return done(false);
          } else {
            // 判断选择不符合时，必须输入理由
            if (
              submit_info[temp_ques] == "4" ||
              submit_info[temp_ques] == "5"
            ) {
              if (this.desc_reason[i] == null || this.desc_reason[i] == "") {
                var reason_txt = "请在问题" + i + "中输入不符合的理由！";
                this.desc_reason[i] == null;
                Toast.fail(reason_txt);
                return done(false);
              }
            }
          }
        }
        var submit_eva_json = JSON.stringify(submit_desc_reason);
        var ques_len = this.ques_length;
        for (var i = 1; i <= ques_len; i++) {
          var temp_ques = "ques" + i;
          temp_str.push(submit_info[temp_ques]);
          // temp_desc_reason.push(this.desc_reason[i]);
        }
        var submit_eva_temp = JSON.stringify(temp_str);
        var submit_eva = eval("(" + submit_eva_temp + ")");

        const sub_eva = window.localStorage.getItem("account");

        let params = {
          account: sub_eva,
          courseId: this.course_id,
          stu_cm_id: this.stu_cm_id,
          submit_eva: submit_eva,
          detail_reason: submit_eva_json,
        };
        console.log(params);
        this.req
          .jsonpost("/course/evaluation", params)
          .then((response) => {
            let { code, data, msg } = response;
            if (code == 200) {
              if (data == 1) {
                Notify({ type: "success", message: "评价成功!" });
                this.showEvaDialog = false;
                this.showDetail = false;
                this.getCourse();
              }
              if (data == 2) {
                Notify({ type: "danger", message: "超时未评!" });
                this.showEvaDialog = false;
                this.showDetail = false;
              }
              if (data == 0) {
                Notify({ type: "danger", message: "评价失败!" });
                this.showEvaDialog = false;
                this.showDetail = false;
                this.getCourse();
              }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        return done(false);
      }
    },

    // 课程评价按钮
    queEva(c_id) {
      //const eva_id = c_id;
      this.course_id = c_id;
      const acc_eva = window.localStorage.getItem("account");
      this.req
        .post("/student_questionnaire", { account: acc_eva })
        .then((response) => {
          let { code, msg, data } = response;
          console.log(data);
          //启用问卷
          this.stu_cm_id = data.comment_detail.stu_cm_id;
          // 选择题的个数
          this.radio_num = data.comment_overall.model_cm_op_count;
          if (code == 200) {
            this.showQue = true;
            this.q_eva_title = data.comment_overall.model_cm_name;
            this.q_data = data.comment_detail.commentList;
            this.q_length = data.comment_detail.commentList.length;
            for (var i = 0; i < this.q_length; i++) {
              this.q_data[i].ques =
                "ques" + data.comment_detail.commentList[i].question_id;
              var item =
                "ques" + data.comment_detail.commentList[i].question_id;
              // this.evaInfo[item] = '';
              // 可以借助Vue提供了相关API动态添加响应式属性
              this.$set(this.evaInfo, item, "");
              // this.evaInfo.push(item);
            }
          } else if (code == 201) {
            this.showQue = false;
          } else {
            Notify({ type: "danger", message: msg });
            this.showQue = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    async qonBeforeClose(action, done) {
      if (action === "confirm") {
        var submit_info = this.evaInfo;
        var submit_desc_reason = this.desc_reason;
        var temp_length = this.radio_num;
        var temp_str = [];
        var temp_desc_reason = []; //将非空的理由放入数组中
        for (var i = 1; i <= temp_length; i++) {
          var temp_ques = "ques" + i;
          // 判断问题不能为空
          if (submit_info[temp_ques] == "") {
            var str_info = "问题" + i + "没有选择";
            Toast.fail(str_info);
            return done(false);
          } else {
            // 判断选择不符合时，必须输入理由
            if (
              submit_info[temp_ques] == "4" ||
              submit_info[temp_ques] == "5"
            ) {
              if (this.desc_reason[i] == null || this.desc_reason[i] == "") {
                var reason_txt = "请在问题" + i + "中输入不符合的理由！";
                this.desc_reason[i] == null;
                Toast.fail(reason_txt);
                return done(false);
              }
            }
          }
        }
        var submit_eva_json = JSON.stringify(submit_desc_reason);
        var ques_len = this.q_length;
        for (var i = 1; i <= ques_len; i++) {
          var temp_ques = "ques" + i;
          temp_str.push(submit_info[temp_ques]);
          // temp_desc_reason.push(this.desc_reason[i]);
        }
        var submit_eva_temp = JSON.stringify(temp_str);
        var submit_eva = eval("(" + submit_eva_temp + ")");

        const sub_eva = window.localStorage.getItem("account");

        let params = {
          account: sub_eva,
          courseId: 0,
          stu_cm_id: this.stu_cm_id,
          submit_eva: submit_eva,
          detail_reason: submit_eva_json,
        };
        for (let i = 0; i < this.q_length; i++) {
          console.log(submit_eva[i]);
        }

        console.log(params);
        this.req
          .jsonpost("/course/evaluation", params)
          .then((response) => {
            let { code, msg, data } = response;
            if (code == 200) {
              if (data == 1) {
                Notify({ type: "success", message: "评价成功!" });
                this.showQue = false;
                //this.showDetail = false;
                //this.getCourse();
              }
              if (data == 2) {
                Notify({ type: "danger", message: "超时未评!" });
                this.showQue = false;
                //this.showDetail = false;
              }
              if (data == 0) {
                Notify({ type: "danger", message: "评价失败!" });
                this.showQue = false;
                //this.showDetail = false;
                //this.getCourse();
              }
            } else {
              Notify({ type: "danger", message: msg });
              this.showQue = false;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        return done(false);
      }
    },

    qCanceldialog() {
      // 将滚动条重置为0
      this.$refs.qviewBox.$el.scrollTop = 0;
      this.showQue = false;
      var temp_length = this.q_length;
      for (var i = 0; i < temp_length; i++) {
        var temp_ques = "ques" + i;
        this.evaInfo[temp_ques] = "";
      }
    },

    // 添加颜色
    // add_color(event) {
    //     // @click="add_color"
    //     // this.isActive = false
    //     console.log('111');
    // }
  },
};
</script>
 
<style scoped>
.course-table-content {
  width: 100%;
}
.course-table {
  border-radius: 12px;
}
.top {
  display: flex;
  position: relative;
  flex-direction: row;
  padding-left: 35px;
  overflow-y: hidden;
  background-color: #f1f6fa;
  color: #000;
}
.top-text {
  width: 100px;
  height: 35px;
  font-size: 16px;
  justify-content: center;
  display: flex;
  background-color: #70a64b;
  align-items: center;
}
.no-top-text {
  width: 100px;
  height: 35px;
  font-size: 16px;
  justify-content: center;
  display: flex;
  align-items: center;
}
.main {
  height: 100%;
  width: 730px;
  display: flex;
  position: relative;
  margin-bottom: 50px;
}
.flex-item {
  width: 95px;
  height: 200px;
}
.kcb-item {
  position: absolute;
  justify-content: center;
  display: flex;
  align-items: center;
  border-radius: 12px;
  overflow: hidden;
}
.period {
  font-size: 14px;
  background-color: #f1f6fa;
  color: #000;
}
.small-text {
  font-size: 8px;
  color: #fff;
  text-align: center;
}
.small_txt_al {
  font-size: 8px;
  color: #576b95;
  text-align: center;
}
.left-text {
  width: 35px;
  height: 100px;
  font-size: 18px;
  justify-content: center;
  display: flex;
  align-items: center;
}
.alredy_eva {
  position: absolute;
  display: block;
  width: 16px;
  height: 15px;
  top: 0;
  right: 0;
  color: green;
}
.van-dialog {
  color: #000;
  width: 80%;
  height: 84%;
}

.eva_div {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 40px;
}
.van-radio {
  margin-top: 10px;
}
.eva_div span {
  color: #2b5797;
}
.radio_color {
  color: green;
}
.eva_content {
        height: 80%;
        margin-top: 20px;
    }
</style>
<style>
.van-cell__value {
  text-align: left;
  color: #1989fa;
}
.van-cell__left-icon {
  position: absolute;
  height: 25px;
  width: 25px;
  margin-left: 10%;
}
.van-action-sheet__content {
  text-align: center;
}
.van-action-sheet__header {
  font-weight: 700;
}
</style>
<style>
.van-picker-column__item {
  color: #1989fa;
}
.van-nav-bar__right {
  position: absolute;
  left: 60%;
}
.van-radio__label {
  color: #969696;
}
.van-field__body {
  border: 1px solid #eee;
  border-radius: 10px;
}
.radio_color .van-radio__label {
  color: green;
}
</style>